<template>
  <div :id="props.id"
       :style="{width: props.width, height: props.height}"
  ></div>
</template>
<script setup lang="ts">

//堆叠折线图

import * as echarts from 'echarts';
import {onMounted, onUnmounted, defineProps} from 'vue';

interface YDdataInterface {
  name: string;
  type?: 'line';
  stack?: 'Total';
  data: number[]
}

export interface BarInterface {
  title: string;
  xData: string[];
  yData: YDdataInterface[];
}

const props = defineProps({
  id: {
    type: String,
    default: 'line'
  },
  theme: {
    type: String,
    default: '' // dark
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
  //图表标题配置
  titleOption: {
    type: Object,
    default: () => {
      return {
        show: true, //是否显示标题
        fontSize: 16, //标题字体大小
        color: '#333' //标题字体颜色
      }
    }
  },
  data: {
    type: Object,
    default: () => {
      return {
        title: '堆叠折线图',
        xData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        yData: [
          {
            name: '电子邮箱',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '短信',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '线下推广',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '搜索引擎',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ],
        legend: ['电子邮件', '短信', '视频广告', '线下推广', '搜索引擎']
      }
    }
  },
  option: {
    type: Object,
    default: () => {
      return {
        title: {
          show: true,
          text: '堆叠折线图',
          textStyle: {
            fontSize: 16,
            color: '#333'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: []
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: []
      }
    }
  }
});

onMounted(() => {
  init()
});

function init() {
  const basicBar = echarts.init(document.getElementById(props.id), props.theme);
  props.option.title.text = props.data.title;
  props.option.xAxis.data = props.data.xData;
  props.option.legend.data = props.data.legend;
  props.option.series = props.data.yData;
  props.option.title.show = props.titleOption.show;
  props.option.title.textStyle.fontSize = props.titleOption.fontSize;
  props.option.title.textStyle.color = props.titleOption.color;
  basicBar.setOption(props.option);
}

function resize() {
  const basicBar = echarts.init(document.getElementById(props.id), props.theme);
  basicBar.resize();
}

onMounted(() => {
  window.addEventListener('resize', resize);
});

onUnmounted(() => {
  window.removeEventListener('resize', resize);
});

function refreshChart(data: BarInterface) {
  const basicBar = echarts.init(document.getElementById(props.id), props.theme);
  props.option.title.text = data.title;
  props.option.xAxis.data = data.xData;
  props.option.series[0].data = data.yData;
  basicBar.setOption(props.option);
}

defineExpose({
  refreshChart
});
</script>
<style scoped lang="scss">

</style>